import React, {useMemo, useRef} from "react";
import { Badge, Button } from "antd";

import ProBox from "vendor/components/pro-box";
import SkProTable, { TableType, IProTableRef } from "vendor/components/pro-table-native";
import { helper } from "vendor/utils/T";
import { permission, EnumAuthKey } from "@/service/permission";
import { useThemeToken } from "@/constants";
import { EnumStatus } from '../../../constants'

import { EnumRoleDataScopeTypeList } from './constants';
import { getDataAction, getCreateOrEdit, filterItems } from './proTableDriver';
import { DataAuthBtn } from './btn';
import { RespDataType } from '../api';
import { useList } from './useList';

interface ListProps {}

const List: React.FC<ListProps> = () => {
    const { themeToken } = useThemeToken();
    const proTableRef = useRef<IProTableRef>();
    const columns = useMemo(() => getColumns(proTableRef), [proTableRef]);
    const { loading, initData } = useList();

    return <ProBox loading={loading}>
        <SkProTable
            ref={proTableRef}
            dataAction={getDataAction(proTableRef, initData.formatMenuData)}
            rowKey={"roleId"}
            theme={themeToken.proTableToken}
            headerProps={{
                operatorProps: {
                    btnList: [
                        {innerType: "create", authKey: EnumAuthKey.role.addButton},
                        {innerType: "edit", authKey: EnumAuthKey.role.editButton},
                        {innerType: "delete", authKey: EnumAuthKey.role.removeButton}
                    ].filter((item) => permission.can(item.authKey)),
                    createOrEditProps: {
                        modalProps:{
                            width: 600
                        },
                        CreateOrEditContent: getCreateOrEdit(initData.menuTree),
                        getModalTitle: (rowKey) => rowKey ? "编辑角色" : "创建角色",
                    },
                },
                filterProps:{
                    maxWidth: "25%",
                    filterItems
                }
            }}
            contentProps={{
                tableProps: {
                    columns,
                }
            }}
            onError={(msg) => console.error(msg)}
        />
    </ProBox>
}

export default List;

const getColumns = (proTableRef: React.MutableRefObject<IProTableRef>) => {
    const statusToInfo = helper.convertArrayToObj(EnumStatus);
    const dataScopeTypeToInfo = helper.convertArrayToObj(EnumRoleDataScopeTypeList);

    const columns: TableType.ColumnsType<RespDataType.RoleItem> = [
        {
            title: '角色名称',
            dataIndex: 'roleName',
        },
        {
            title: '权限范围',
            dataIndex: 'dataScope',
            render: (value) => dataScopeTypeToInfo[value] ? dataScopeTypeToInfo[value].label : "-",
        },
        {
            title: '角色状态',
            dataIndex: 'status',
            render: (value) => {
                const {label, color} = statusToInfo[value];
                return <span>
                    <Badge color={color} />
                    <span style={{color}}>{label}</span>
                </span>
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
        },
        {
            title: "操作",
            render: (value, record) => (<DataAuthBtn roleId={record.roleId} roleName={record.roleName} fetchList={proTableRef.current.doFetchList}>数据授权</DataAuthBtn>)
        }
    ];

    return columns;
}
